<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- <meta http-equiv="Cache-Control" content="no-cache" /> -->
<meta charset="utf-8" />
<meta name="description" content="overview &amp; stats" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="../../ace/assets/css/bootstrap.css" />
<link rel="stylesheet" href="../../ace/assets/css/font-awesome.css" />

<!-- page specific plugin styles -->

<!-- text fonts -->
<link rel="stylesheet" href="../../ace/assets/css/ace-fonts.css" />

<!-- ace styles -->
<link rel="stylesheet" href="../../ace/assets/css/ace.css"
	class="ace-main-stylesheet" id="main-ace-style" />
	
<!-- page specific plugin styles -->
<link rel="stylesheet" href="../../ace/assets/css/select2.css" />
	<link rel="stylesheet" href="../../ace/assets/css/chosen.css" />


<!--[if lte IE 9]>
			<link rel="stylesheet" href="../../ace/assets/css/ace-part2.css" class="ace-main-stylesheet" />
		<![endif]-->

<!--[if lte IE 9]>
		  <link rel="stylesheet" href="../../ace/assets/css/ace-ie.css" />
		<![endif]-->

<!-- inline styles related to this page -->

<!-- ace settings handler -->
<script src="../../ace/assets/js/ace-extra.js"></script>

<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

<!--[if lte IE 8]>
		<script src="../../ace/assets/js/html5shiv.js"></script>
		<script src="../../ace/assets/js/respond.js"></script>
		<![endif]-->




	
		
<style>

	/*须知界面*/
.xuzhi{width:890px;margin:20px auto;border: 1px solid #ececec;background:#fff;padding:20px;-moz-box-shadow: 1px 1px 10px #909090;/*firefox*//* -webkit-box-shadow: 1px 1px 10px #909090; *//*safari或chrome*/box-shadow: 2px 1px 10px #c8c8c8;/*opera或ie9*/clear:both;height:550px;}
.xuzhi .content{height:380px;overflow:auto;}
.xuzhi .content h2{text-align:center;margin-bottom:10px;border-bottom:1px solid #ccc;padding-bottom:10px;}
.xuzhi .content p{ text-indent:2em; line-height:30px; color:#555;}
.xuzhi h3{border-top:1px solid #ccc;margin:20px 0;padding-top:10px;text-align:center;}
.xuzhi h3 span{ display:inline-block;  margin-left:5px; font-size:16px; font-weight:normal;}
.xuzhi h1{ text-align:center;}
.xuzhi h1 a{ background:#139de2; border-radius:3px; color:#fff; font-size:16px; margin-top:10px; cursor:pointer; text-align:center; padding:7px 50px;}
.xuzhi h1 a:hover{ background:#0a8ed0;}

	/**/
p{ text-indent:2em; line-height:30px; color:#555;}
</style>
<title>名称自主申报</title>
</head>
<body class="no-skin">
	<jsp:include page="include/navbar.jsp"></jsp:include>
	<div class="main-container " id="main-container">
	
		<!-- /section:basics/sidebar -->
		<div class="main-content ">
			<div class="page-header">
						
			</div><!-- /.page-header -->
			
			
					<div class="row"> 	
							<div class="col-sm-4 form-group">	
								<div class="input-group" >
									<label class="control-label no-padding-right col-sm-2">门类 </label>
									<div class="col-sm-10">
										<select  id="category" name="category" class="form-control  " data-placeholder="" ></select>
									</div>
								</div>	
								
								<div class="widget-box widget-color-blue2" style="border:0px;" >
									 <div class="widget-header">
										<h4 class="widget-title lighter smaller">经营范围选择</h4>
										<!-- <div class="widget-toolbar">
											<label> 
												<small class="green"> 
												</small>   
												<input type="checkbox" name="myoption[]" class="ace" />
														<span class="lbl">常用的50项经营范围 </span>
											</label>
										</div> -->
									 </div> 

									<div class="widget-body">
									
										<div class="form-group ">
										
											<select  id="firstnode" multiple="" name="firstnode" class="form-control" data-placeholder="" style="height:432px;">
												
											</select><!-- /section:plugins/input.select2 -->
									
											<!-- section:plugins/分页 -->
												<!-- 	<span class="inline pull-right">
														<span class="grey">style:</span>
		
														<span class="btn-toolbar inline middle no-margin">
															<span id="select2-multiple-style" data-toggle="buttons" class="btn-group no-margin">
																<label class="btn btn-xs btn-yellow active">
																	1
																	<input type="radio" value="1" />
																</label>
		
																<label class="btn btn-xs btn-yellow">
																	2
																	<input type="radio" value="2" />
																</label>
															</span>
														</span>
													</span> -->
											<!-- /section:plugins/分页 -->
										</div><!--/.form-group  -->
										
										
									</div><!--/.widget-body  -->
								</div>	<!--/.widget-box  -->
								
							</div><!--/.col-sm-6	 -->
								<div class="form-group col-sm-3">
									<div class="input-group col-sm-11">
										
	
										<input type="text" class="form-control search-query" placeholder="Type your query" />
										<span class="input-group-btn">
											<button type="button" class="btn btn-purple btn-sm">
												<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
												查找
											</button>
										</span>
									</div><!--/.input-group -->
									
									<div class="widget-box widget-color-blue2" style="    border-color: #d5d5d5;" >
										 <div class="widget-header">
											<h4 class="widget-title lighter smaller"></h4>
										
										 </div> 

										<div class="widget-body form-group"  style="display:block; height:400px; overflow:scroll;">
										
											<div class="form-group " id="treeContainer">
											
												<ul id="tree1"></ul>
											</div><!--/.form-group  -->
											
											
										</div><!--/.widget-body  -->
									</div>	<!--/.widget-box  -->
									
											
								</div><!--/.form-group   -->
									<div class="col-sm-1" style="height: 300px;/* vertical-align: middle; */">
										<button class="btn btn-warning" id="gritter-add" style="
																						    margin-bottom: 20px;
																						    margin-top: 200px;
																						">添加</button>
										<button class="btn btn-inverse" id="gritter-remove">删除</button>
										
									</div>
									<div class="col-sm-3" id="scope">
										<div>
											<label for="form-field-select-1">一般经营范围</label>

											<select class="form-control" id="form-field-select-1" multiple="multiple">
												
											</select>
										</div>
										
										<div>
												<label for="form-field-select-2">许可经营范围</label>

												<select class="form-control" id="form-field-select-2" multiple="multiple">
															
										
												</select>
												<style >
													#form-field-select-2,#form-field-select-1{
																height:200px;		
													}
												</style>
										</div>
									</div>
									<div class="col-sm-1" style="height: 300px;/* vertical-align: middle; */">
										<button class="btn btn-error" id="gritter-add" style="
																						    margin-bottom: 20px;
																						    margin-top: 200px;
																						">确认</button>
										<button class="btn btn-error" id="gritter-error">返回</button>
										
									</div>
				</div>		
				
		
		
		
		
		
		
		
		</div>
	</div>
	
		
	
	
	
		
		<!--[if !IE]> -->	
		<script type="text/javascript">
			window.jQuery || document.write("<script src='../../ace/assets/js/jquery.js'>"+"<"+"/script>");
		</script>

		<!-- <![endif]-->

		<!--[if IE]>
			<script type="text/javascript">
			 window.jQuery || document.write("<script src='../../ace/assets/js/jquery1x.js'>"+"<"+"/script>");
			</script>
		<![endif]-->
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
		<script src='../../ace/assets/js/jquery.js'></script>
		<!-- 	<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='../../ace/assets/js/jquery.mobile.custom.js'>"+"<"+"/script>");
		</script> -->
		<script src="../../ace/assets/js/bootstrap.js"></script>

		<!-- page specific plugin scripts -->

		<!--[if lte IE 8]>
		  <script src="../../ace/assets/js/excanvas.js"></script>
		<![endif]-->
		<script src="../../ace/assets/js/jquery-ui.custom.js"></script>
		<script src="../../ace/assets/js/jquery.ui.touch-punch.js"></script>
		<script src="../../ace/assets/js/jquery.easypiechart.js"></script>
		<script src="../../ace/assets/js/jquery.sparkline.js"></script>
		<script src="../../ace/assets/js/flot/jquery.flot.js"></script>
		<script src="../../ace/assets/js/flot/jquery.flot.pie.js"></script>
		<script src="../../ace/assets/js/flot/jquery.flot.resize.js"></script>

		<!-- ace scripts -->
		<script src="../../ace/assets/js/ace/elements.scroller.js"></script>
		<script src="../../ace/assets/js/ace/elements.colorpicker.js"></script>
		<script src="../../ace/assets/js/ace/elements.fileinput.js"></script>
		<script src="../../ace/assets/js/ace/elements.typeahead.js"></script>
		<script src="../../ace/assets/js/ace/elements.wysiwyg.js"></script>
		<script src="../../ace/assets/js/ace/elements.spinner.js"></script>
		<script src="../../ace/assets/js/ace/elements.treeview.js"></script>
		<script src="../../ace/assets/js/ace/elements.wizard.js"></script>
		<script src="../../ace/assets/js/ace/elements.aside.js"></script>
		<script src="../../ace/assets/js/ace/ace.js"></script>
		<script src="../../ace/assets/js/ace/ace.ajax-content.js"></script>
		<script src="../../ace/assets/js/ace/ace.touch-drag.js"></script>
		<script src="../../ace/assets/js/ace/ace.sidebar.js"></script>
		<script src="../../ace/assets/js/ace/ace.sidebar-scroll-1.js"></script>
		<script src="../../ace/assets/js/ace/ace.submenu-hover.js"></script>
		<script src="../../ace/assets/js/ace/ace.widget-box.js"></script>
		<script src="../../ace/assets/js/ace/ace.settings.js"></script>
		<script src="../../ace/assets/js/ace/ace.settings-rtl.js"></script>
		<script src="../../ace/assets/js/ace/ace.settings-skin.js"></script>
		<script src="../../ace/assets/js/ace/ace.widget-on-reload.js"></script>
		<script src="../../ace/assets/js/ace/ace.searchbox-autocomplete.js"></script>



		<!-- page specific plugin scripts -->
		<script src="../../ace/assets/js/fuelux/fuelux.wizard.js"></script>
		<script src="../../ace/assets/js/jquery.validate.js"></script>
		<script src="../../ace/assets/js/additional-methods.js"></script>
		<script src="../../ace/assets/js/bootbox.js"></script>
		<script src="../../ace/assets/js/jquery.maskedinput.js"></script>
		<script src="../../ace/assets/js/select2.js"></script>
		<script src="../../ace/assets/js/fuelux/fuelux.tree.js"></script>
		
	
		
		
		
		<!-- inline scripts related to this page -->
			<!-- inline scripts related to this page -->
		<script type="text/javascript">
		
	
		
			var total_data={
					head:['农、林、牧、渔业','采矿业','制造业（含再制造）',
					      	{	
								name:'电力、热力、燃气及水生产和供应业',children:[{
														name:'电力、热力生产和供应业',children:[{
																					name:'电力生产',children:['火力发电','水力发电','核力发电','风力发电','太阳能发电']
																					},
																					'太阳能发电站运营',
																					{
																						name:'电力供应',children:['潮汐能发电','沼气发电','地热能发电','生物质能发电']
																					},{
																						name:'其他电力生产',children:['电力供应','售电业务']
																					},{
																						name:'热力生产和供应',children:['热力生产和供应']
																					}]
															},
															'燃气生产和供应业','水的生产和供应业']
								
					      	},
					      '建筑业','批发和零售业',
					      '交通运输、仓储和邮政、快递业','住宿和餐饮业','信息传输、软件和信息技术服务业',
					      '金融业','房地产业','租赁和商务服务业',
					      '科学研究和技术服务业','水利、环境和公共设施管理业','居民服务、修理和其他服务业',
					      '教育','卫生和社会工作','文化、体育和娱乐业',
					      '公共管理、社会保障和社会组织','国际组织']
					 
					
			};

			
		 
		
			
			
			
		
		
		/*树行为（节点点击） e:事件  ,d:数据*/
		function treeAction(e, d){
			var items = $('#tree1').tree('selectedItems'),
				item,
				newOption;
			
			for(var i in items) if (items.hasOwnProperty(i)) {
			   	   item = items[i];
			   	   newOption='<option value="'+item.text+'">'+item.text+'</option>';
			   	$('[value='+item.text+']').remove();
			  if(item.text==='热力生产和供应'){
				  $('#form-field-select-1').append(newOption);
				 
			  }else{
				  $('#form-field-select-2').append(newOption);
			  }
				 
			}
		} 
		/*将原来数据转换成树结构数据  tree_data:原来数据        第二层数据转换*/
		function initiateDemoData(tree_data){
			var dataSource1 = function(options, callback){
				var $data = null
				if(!("text" in options) && !("type" in options)){
					$data = tree_data;//the root tree
					callback({ data: $data });
					return;
				}
				else if("type" in options && options.type == "folder") {
					if("additionalParameters" in options && "children" in options.additionalParameters)
						$data = options.additionalParameters.children || {};
					else $data = {}//no data
				}
				
				if($data != null)//this setTimeout is only for mimicking some random delay
					callback({ data: $data });

			}
			return {'dataSource1': dataSource1 } 
		}
					
		 /*树数据 初始化 第一层数据转换  array:数据源；target:数据载体*/
		function setTree(array,target){
			if(!target){
				target={};
			}
			
			$.each(array,function (i){
				if(typeof array[i]=='string'){
					target['node'+i]={text:this,type:'item'};
				}else{
					
					target['node'+i]={text:this.name,type:'folder',};
					target['node'+i]['additionalParameters']={children:{}};
					setTree(array[i]['children'],target['node'+i]['additionalParameters']['children']);
				}
			})
			
		}
		
		/*
		下拉框添加数据
		数据源格式： 数组
		
		params
			obj:数据源
			id:下拉框ID
		*/
		function setSelectOption(obj,id){
					var temp_name;
					
					if(!obj){
						return ;
					}
					$.each(obj,function (i){
					 	if(typeof obj[i]=='string'){
					 		temp_name=this;
						}else{
							//debugger;
							temp_name=this.name;
						} 
						$("#"+id).append('<option value="'+temp_name+'">'+temp_name+'</option>');
						$("[value="+temp_name+"]").data(obj[i]);
					})
		}
		/*生成树  tree_data： 数据*/
		function initTree(tree_data){
			var sampleData = initiateDemoData(tree_data);
			

			$('#tree1').ace_tree({
				dataSource: sampleData['dataSource1'],
				multiSelect: true,
				cacheItems: true,
				'open-icon' : 'ace-icon tree-minus',
				'close-icon' : 'ace-icon tree-plus',
				'selectable' : true,
				'selected-icon' : 'ace-icon fa fa-check',
				'unselected-icon' : 'ace-icon fa fa-times',
				loadingHTML : '<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>'
			});
			
			
			$('#gritter-add').on('click',function (e,d){
				 treeAction(e, d);
			});
			$('#gritter-remove').on('click',function (e,d){
				
				$('#scope option:selected').remove();
			});
			
		}
		
			jQuery(function($){
				
				//category门类数据项加载
				(function(){
					setSelectOption(total_data['head'],"category");
				}());
				//点击事件
				$("#category").change(function(e,d){
					$('#firstnode').find('option').remove();
					setSelectOption($(this).find(':selected').data()['children'],"firstnode");
					$("#firstnode option").click(function (e){
						
						$("#tree1").remove();
					
						$('#treeContainer').html('<ul id="tree1"></ul>');
						if(!$(this).data()['children']){
							return ;
						}
						var tree_data={};
						setTree($(this).data()['children'],tree_data);
						
						initTree(tree_data);
						//$("#tree1").tree('discloseAll');
					});
				})
				
			});
			
			
		</script>
		

	

</body>
</html>